<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table, th, td {
            border: 1px solid red;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            height: 30px;
        }

        tbody tr:hover {
            background-color: blue!important;
            color: #fff;
        }

        tbody tr:nth-child(2n) {
            background-color: #ccc;
        }
    </style>

    <script src="../js/index.js"></script>
    <script>
        !function() {
            window.onload = function() {
                document.getElementById('sendBtn').onclick = function() {
                    /*ajax('get', 'data/users.json', function(data) {
                        console.log(data);
                    });*/

                    ajax('get', '../js/index.json', render);
                    
                }
            }

            // var success = function(response) {
            //     // console.log(response);
            //     render(response);
            // };

            // 根据返回的数据，渲染列表
            var render = function(response) {
                var table = document.querySelector('table');
                var trStr = '';
                var trArr = [];
                var i;
                var data = response.data2;
                var list = data.list;
                var total = data.total;
                var len = list.length;

                for (i=0; i<len; i++) {
                    trArr.push(
                        '<tr data-index="', i, '">', 
                            '<td>', list[i].username, '</td>', 
                            '<td>', list[i].name, '</td>', 
                            '<td>', list[i].age, '</td>', 
                            '<td>', list[i].gender, '</td>', 
                            '<td>', list[i].mobile, '</td>',
                            '<td>', 
                                '<button data-uid="', list[i].id, '" data-name="', list[i].name, '" class="del-btn">删除</button>',
                                '<button>修改</button>',
                                '<button>查看</button>',
                            '</td>',
                        '</tr>'
                    );
                }

                table.getElementsByTagName('tbody')[0].innerHTML = trArr.join('');
            };

        }();
    </script>
</head>
<body>
    
    <button id="sendBtn">send</button>
    <hr>

    <table id="myTable">
        <thead>
            <tr>
                <th>用户名</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody></tbody>
    </table>

</body>
</html>